<ng-template #autocompleteTemplate>
  <div class="lv-autocomplete-panel" [ngClass]="lvPanelClass" [@showItem]="_animationState" (@showItem.done)="onAnimationDone($event)">
    <ng-container *ngIf="!lvLoading && lvData.length > 0">
      <div class="lv-autocomplete-content" [class.lv-autocomplete-size-large]="lvSize === 'large'">
        <ng-container *ngIf="typeUtils.isTemplateRef(lvHeader)">
          <ng-container *ngTemplateOutlet="lvHeader"></ng-container>
        </ng-container>

        <ul class="lv-autocomplete-content-list" [style.maxHeight]="scrollY">
          <ng-container *ngIf="!lvVirtualScroll; else scrollViewTpl">
            <ng-container *ngFor="let child of lvData">
              <ng-container *ngTemplateOutlet="lvAutocompleteItem; context: { $implicit: child }"></ng-container>
            </ng-container>
          </ng-container>
        </ul>
      </div>
    </ng-container>
    <ng-container *ngIf="!lvLoading && lvShowNoData && inputValue.length > 0 && lvData.length === 0">
      <div class="lv-autocomplete-nodata">
        <ng-container [ngSwitch]="true">
          <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvNoDataTemplate)">
            <ng-container *ngTemplateOutlet="lvNoDataTemplate"></ng-container>
          </ng-container>

          <ng-container *ngSwitchDefault>
            <div class="lv-autocomplete-nodata-default"><lv-empty [lvImage]="null"></lv-empty></div>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
    <ng-container *ngIf="lvLoading">
      <div class="lv-autocomplete-loading">
        <img src="{{ assetsPrefixPath }}assets/webp/gray.png" alt="icon-loading" class="lv-icon-loading" />
        <span>{{ 'loadingText' | i18n }}</span>
      </div>
    </ng-container>
  </div>
</ng-template>

<ng-template #lvAutocompleteItem let-child>
  <li>
    <div
      class="lv-autocomplete-item"
      [ngClass]="{
        'lv-autocomplete-item-selected': (child.value || child) == selected,
        'lv-autocomplete-item-active': (child.value || child) == active
      }"
      (click)="itemClick($event, child)"
      (mousedown)="$event.preventDefault()"
    >
      <ng-container [ngSwitch]="true">
        <span *ngSwitchCase="typeUtils.isTemplateRef(lvLabelTemplate)">
          <ng-container *ngTemplateOutlet="lvLabelTemplate; context: { $implicit: child }"></ng-container>
        </span>

        <span *ngSwitchDefault class="lv-autocomplete-item-text">
          <lv-highlight [lvContent]="lvHighlightContent" [lvWholeStr]="child.value || child"></lv-highlight>
        </span>
      </ng-container>
    </div>
  </li>
</ng-template>

<ng-template #scrollViewTpl>
  <cdk-virtual-scroll-viewport
    class="lv-virtual-panel-content"
    [itemSize]="lvVirtualItemSize"
    [maxBufferPx]="lvVirtualMaxBuffer"
    [minBufferPx]="lvVirtualMinBuffer"
    [style.height]="virtualScrollY"
    (scrolledIndexChange)="scrolledIndexChange($event)"
    #scrollComponent
  >
    <ng-container *cdkVirtualFor="let child of lvData; let index = index; trackBy: lvTrackBy; templateCacheSize: 0">
      <ng-container *ngTemplateOutlet="lvAutocompleteItem; context: { $implicit: child }"></ng-container>
    </ng-container>
  </cdk-virtual-scroll-viewport>
</ng-template>
